<ion-view class="media-detail">

  <ion-content>

    <div class="row">
      <div class="col col-33" ng-if="vm.media.mediaType != 'episode'">
        <img class="media-detail-poster" ng-show="vm.media.poster_path" ng-src="https://image.tmdb.org/t/p/w300/{{vm.media.poster_path}}"/>
        <img class="media-detail-poster" ng-show="vm.media.manualInput && vm.media.poster_image_src" ng-src="{{vm.media.poster_image_src}}"/>

        <div style="margin-top: 16px;"  class="text-center">
          <a class="icon-play ion-android-arrow-dropright" ng-click="vm.continueWatching()"></a>
        </div>
      </div>
      <div class="col col-50" ng-if="vm.media.mediaType == 'episode'">
        <img class="media-detail-poster" ng-show="vm.media.backdrop_path" ng-src="https://image.tmdb.org/t/p/w1280/{{vm.media.backdrop_path}}"/>

        <div style="margin-top: 16px;"  class="text-center">
          <a class="icon-play ion-android-arrow-dropright" ng-click="vm.continueWatching()"></a>
        </div>
      </div>
      <div class="col">
        <h2> {{vm.media.name || vm.media.title}}</h2>
        <ul class="info-list">
          <li><strong>{{'VIDEO.RELEASED' | translate}}: </strong> {{vm.media.release_date.substring(0,4) || vm.media.first_air_date.substring(0,4)}}</li>
          <li><strong>{{'VIDEO.IMDB' | translate}}: </strong>
            <a target="_blank" href="http://www.imdb.com/title/{{vm.media.imdb_id}}">{{vm.media.name || vm.media.title}}</a>
          </li>
          <li><strong>{{'VIDEO.RATING' | translate}}: </strong>
            {{vm.media.vote_average}}/10 ({{vm.media.vote_count}} {{'VIDEO.VOTES' | translate}})
          </li>
        </ul>

        <br>
        <h4>{{'VIDEO.OVERVIEW' | translate}}</h4>
        <p class="overview-text">{{vm.media.overview}}</p>

        <br>
        <div ng-if="vm.media.genre">
          <h4>{{'VIDEO.GENRE' | translate}}</h4>
          <ul class="genre-list">
            <li class="genre-tag interactive" ng-repeat="genre in vm.media.genre" ui-sref="dash({genreId: genre.id})">
              {{genre.name}}
            </li>
          </ul>
        </div>



        <hr>
        <button class="btn btn-primary" ng-click="vm.markAsCompleted()" ng-if="vm.isContinuing">Mark as Completed</button>


        <div class="spinner big" ng-show="!vm.media">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </div>
    </div>




    <div style="padding: 8px;">



      <div ng-if="vm.media.trailerKey">
        <h4>{{'VIDEO.TRAILER' | translate}}</h4>
        <iframe width="560" height="315" ng-src="{{'https://www.youtube.com/embed/'+vm.media.trailerKey+'?rel=0' | trustResourceUrl}}"
                frameborder="0" allowfullscreen></iframe>
      </div>



     <div ng-if="vm.media.mediaType === 'tvShow' || vm.media.mediaType == 'episode'">
       <hr>
       <div class="season-picker-list">
         <h4>{{'VIDEO.EPISODES' | translate}}</h4>
         <div class="season-picker-item" ng-class="{'active': vm.currentSeason == season}" ng-click="vm.setCurrentSeason(season)"
              ng-repeat="(season, episodes) in vm.seasons">
           {{'VIDEO.SEASON' | translate}} {{season}}
         </div>
       </div>

       <div class="row media-detail-episode-item" ng-repeat="episode in vm.seasons[vm.currentSeason] | orderBy:'episode_number'">
         <div class="col col-33">
           <div class="row media-detail-episode-image-wrapper">
             <div class="media-detail-episode-still">
               <img ng-if="episode.still_path" ng-src="{{episode.still_path}}"/>
               <div ng-if="!episode.still_path" class="fallback-image"></div>
             </div>

             <div class="media-detail-episode-play-button text-center">
               <a ui-sref="player({videoId: episode.id})" class="play-icon ion-ios-play"></a>
             </div>
           </div>
         </div>
         <div class="col">
           <h3 class="media-title"><span ng-show="episode.episodeString">{{episode.episodeString}}</span> {{episode.name}}</h3>
           <p>{{episode.overview | streamaTextDotDotDot:150}}</p>
         </div>

       </div>
     </div>
    </div>



  </ion-content>
</ion-view>
